
<template>
  <div :class="colClass" :style="colStyle">
    <slot></slot>
  </div>
</template>

<script>
import Config from "/src/config";
import { findComponent } from "/src/utils/tools";
import Emitter from "/src/utils/emitter";
const responseSize = ["xs", "sm", "md", "lg", "xl", "xxl"];
export default {
  name: "Col",
  mixins: [Emitter],
  props: {
    span: [Number, String],
    order: [Number, String],
    offset: [Number, String],
    push: [Number, String],
    pull: [Number, String],
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object],
    xxl: [Number, Object],
  },
  data() {
    const currentSpan =
      (!this.span && this.span !== 0) || parseFloat(this.span) < 0
        ? -1
        : Math.floor(this.span);

    return {
      classPrefix: Config.classPrefix + "-col",
      componentName: "Col",
      currentSpan: currentSpan,
      parentRow: findComponent(this, "Row"),
      gutter: 0,
    };
  },
  computed: {
    colClass() {
      const classList = [
        `${this.classPrefix}`,
        {
          [`${this.classPrefix}--span-${this.currentSpan}`]:
            this.currentSpan !== -1,
          [`${this.classPrefix}--order-${this.order}`]: this.order,
          [`${this.classPrefix}--offset-${this.offset}`]: this.offset,
          [`${this.classPrefix}--push-${this.push}`]: this.push,
          [`${this.classPrefix}--pull-${this.pull}`]: this.pull,
        },
      ];
      responseSize.forEach((size) => {
        if (typeof this[size] === "number") {
          classList.push(`${this.classPrefix}--span-${size}-${this[size]}`);
        } else if (typeof this[size] === "object") {
          const sizeObj = this[size];
          Object.keys(sizeObj).forEach((key) => {
            classList.push(
              `${this.classPrefix}--${key}-${size}-${sizeObj[key]}`
            );
          });
        }
      });
      return classList;
    },
    colStyle() {
      let style = {};
      if (this.gutter) {
        style = {
          paddingLeft: this.gutter / 2 + "px",
          paddingRight: this.gutter / 2 + "px",
        };
      }
      return style;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.updateGutter(this.parentRow && this.parentRow.gutter);
      this.parentEmit("Row", "on-update-span");
    });
  },
  methods: {
    updateGutter(value) {
      this.gutter = value;
    },
  },
  watch: {
    "parentRow.gutter": function (newVal) {
      this.updateGutter(newVal);
    },
  },
};
</script>
